import Base from './Base.js';
import Point from '../Point.js';
import { GRAPH_TYPES } from './Graph.enum.js';
import Color from '../Color';

class Polygon extends Base {
    constructor({ pos } = {}) {
        super(...arguments);
        this.name = GRAPH_TYPES.POLYGON;
        this.complete = false;
        // check Polygon has complete already...
        if (this.points && this.points.length > 2) {
            let s = new Point(this.points[0].x, this.points[0].y),
                e = this.points[this.points.length - 1];
            if (s.equals(e)) this.complete = true;
        }
        if (!this.points || !this.points.length) this.points = [pos];
        this.initControlPoints();
    }

    initPoints(pos) {
        let p = new Point(pos.x, pos.y);
        if (this.points.length > 2 && p.equals(this.points[0])) {
            this.complete = true;
            this.initControlPoints();
        } else {
            this.points.push(p);
        }
    }

    initUpdate(start, end) {
        if (!this.complete) return;
        // console.log('[Polygon] initUpdate: ', ...arguments);
        super.initUpdate(start, end);
    }

    createPath() {
        let r = (1 / this.scaling) * 5 * this.ratio;
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, r, 0, Math.PI * 2, false);
    }

    drawPath(ctx) {
        ctx.beginPath();
        this.points.forEach((p, i) => {
            let y = this.isReverse ? -p.y : p.y;
            if (i === 0) {
                ctx.moveTo(p.x, y);
            } else {
                ctx.lineTo(p.x, y);
            }
        });
        ctx.closePath();
    }
    // 绘制两点之间线长度（同卷尺功能）
    drawLineLength(scaling) {
        this.ctx.save();

        let textSize = this.lineWidth;
        if (scaling) {
            textSize = (1 / scaling) * 20;
        }
        this.ctx.font = textSize + 'px Arial';
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'bottom';
        // console.log('Polygon.drawLineLength: ', ctx);
        this.points.forEach((p, i) => {
            if (i > 0) {
                let lineLength = this.getLineLength(this.points[i], this.points[i - 1]),
                    middlePoint = this.getLineMiddlePoint(this.points[i], this.points[i - 1]);
                this.ctx.fillText(lineLength, middlePoint.x, -middlePoint.y);
                if (i === this.points.length - 1 && this.complete) {
                    (lineLength = this.getLineLength(this.points[0], this.points[i])),
                        (middlePoint = this.getLineMiddlePoint(this.points[0], this.points[i])),
                        this.ctx.fillText(lineLength, middlePoint.x, -middlePoint.y);
                }
            }
        });
        this.ctx.stroke();
        this.ctx.restore();
    }

    drawSelected(ctx) {
        if (ctx) this.ctx = ctx;
        if (!this.complete) return this._drawLocalPoints();

        this.ctx.save();
        this.ctx.lineWidth = this.lineWidth;
        this.ctx.strokeStyle = this.strokeStyle;
        this.drawPath(this.ctx);
        this.ctx.stroke();
        this.ctx.restore();
    }
    draw(ctx, drawDashLine = false) {
        // console.log('[Polygon] draw: ', ctx, this.complete);
        if (ctx) this.ctx = ctx;
        if (!this.complete) return this._drawLocalPoints();
        // let penSize = (1 / this.scaling) * 2 * this.ratio;

        this.ctx.save();
        // this.ctx.beginPath();
        // this.points.forEach((p, i) => {
        //     let y = this.isReverse ? -p.y : p.y;
        //     if (i === 0) {
        //         this.ctx.moveTo(p.x, y);
        //     } else {
        //         this.ctx.lineTo(p.x, y);
        //     }
        // });
        this.drawPath(this.ctx);
        if (this.fillStyle) {
            this.ctx.fillStyle = this.fillStyle;
            this.ctx.fill();
        }

        if (drawDashLine) {
            let pen = 1 / this.scaling || 100;
            this.ctx.lineWidth = pen * 10;
            this.ctx.strokeStyle = Color.lightenDarkenColor(this.fillStyle, 0.3);
            this.ctx.setLineDash([pen * 20, pen * 20]);
            this.ctx.lineCap = 'round';
        } else {
            this.ctx.lineWidth = this.lineWidth;
            this.ctx.strokeStyle = this.strokeStyle;
        }
        // this.ctx.closePath();
        this.ctx.stroke();
        this.ctx.restore();

        //绘制平移/更新图形锚点基准点
        // this.drawAnchorPoint();
        //绘制未连接点 - 未避免车辆绘制，修改到Painter中调用
        // this.drawUnConnectPoints();
    }

    drawCached(ctx) {
        if (!this.complete) return;
        ctx.save();
        // this.drawPath(ctx);
        let penSize = 1 / this.scaling || 100;
        // ctx.fillStyle = Color.lightenDarkenColor(this.fillStyle, 0.3);
        // ctx.fill();
        ctx.lineWidth = penSize * 5;
        ctx.strokeStyle = 'rgba(0, 0, 255, 0.6)';
        ctx.setLineDash([penSize * 10, penSize * 10]);
        ctx.lineCap = 'round';
        ctx.stroke();
        ctx.restore();
    }
    _drawLocalPoints() {
        // console.log('[Polygon] drawPoints: ');
        let penSize = (1 / this.scaling) * 2 * this.ratio;
        let yr = this.isReverse ? -1 : 1;
        this.ctx.save();
        this.ctx.beginPath();
        // darw line
        this.ctx.lineWidth = penSize;
        this.ctx.strokeStyle = '#333333';
        this.ctx.setLineDash([penSize, penSize]);
        this.points.forEach((p, i) => {
            if (i === 0) this.ctx.moveTo(p.x, p.y * yr);
            else this.ctx.lineTo(p.x, p.y * yr);
        });
        if (this.fillStyle) {
            this.ctx.fillStyle = this.fillStyle;
            this.ctx.fill();
        }
        this.ctx.stroke();
        this.ctx.closePath();
        // darw points
        this.points.forEach(p => {
            this.ctx.beginPath();
            this.ctx.arc(p.x, p.y * yr, penSize, 0, -Math.PI * 2);
            this.ctx.fillStyle = 'rgba(0,0,0,0.85)';
            this.ctx.fill();
            this.ctx.closePath();
        });
        this.ctx.restore();
    }

    _getPathDescription(points) {
        let d = '';
        for (let i = 0; i < points.length; i++) d += points[i].x + ',' + points[i].y + ' ';
        return d;
    }
    getSVGCodes() {
        // <polygon stroke-width="603.6810736797684" fill="rgba(30,30,30,0.30)" points="102500,113000 102500,69000 107500,69000 107500,113000 " stroke="none"></polygon>
        let codes = '<polygon stroke-linecap="round" ';
        codes += 'stroke="' + this.strokeStyle + '" ';
        codes += 'stroke-width="' + this.lineWidth + '" ';
        codes += 'fill="' + this.fillStyle + '" ';
        codes += 'points="' + this._getPathDescription(this.points) + '" ';
        codes += '></polygon>';
        return codes;
    }
}
export default Polygon;
